<template>
	<view class="setCountFunDown-page" v-if="show">
		<comMask v-model="show">
			<view class="pops">
				<view class="main" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :style="{'background':`url(${commonConfigs.domainFrontFileLink}/images/verify-code-popup/verify-bg.png) no-repeat`,'backgroundSize':'100% 100%'}" :class="{ show: show }">
					<view class="loading">
						<div class="mask">{{ second }} s</div>
					</view>

					<view style="font-size: 42rpx; margin: 65rpx auto 20rpx;color: #384763;font-weight: bold;" class="font-hanserif-bold">正等待返回结果...</view>

					<view style="color: #384763; font-size: 28rpx" class="font-hanserif-bold">结果返回前，请不要重复操作</view>
				</view>
			</view>
		</comMask>
	</view>
</template>

<script>
	export default {
		name: 'comCountdown',
		props: {
			
			value: {
				type: Boolean,
				default: () => true
			},
			
			topCodePos: {
				type: String,
				default: () => '0rpx'
			},
			
			// 倒计时时间
			second: {
				type: Number,
				default: () => 6
			},

			
		},

		data() {
			return {
				hide: false //提示框显示开关
			};
		},

		computed: {
			
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			show: {
				get() {
					return this.value;
				},
				set(v) {
					this.$emit('input', v);
				}
			},
			
		},
		onLoad() {
		},
		onReady() {},
		methods: {
			
		}
	};
</script>

<style scoped lang="scss">
	.setCountFunDown-page {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-size: cover;
		z-index: 1000000;
		color: #000;

		.pops {
			position: fixed;
			/* position: absolute; */
			z-index: 1000000;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background: rgba(0, 0, 0, 0.8);

			.main {
				position: relative;
				display: none;
				flex-direction: column;
				align-items: center;
				padding: 50upx;
				border-radius: 12upx;
				width: 610upx;
				height: 453upx;
				// background: white;
			}
		}
	}

	.show {
		display: flex !important;
		animation: show 0.6s ease-in-out forwards;
	}

	.hide {
		display: flex !important;
		animation: show 0.3s ease-in-out forwards;
	}

	.tip {
		position: absolute;
		width: 100%;
		display: flex;
		padding: 0 20rpx;
		margin: auto;
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #614cff;
	}

	.left_box,
	.right_box {
		/*
	    左右两边用于 隐藏 旋转的div的盒子
	    通过overflow来隐藏内部div旋转出去的部分
	  */
		position: absolute;
		top: 0;
		width: 74rpx;
		height: 148rpx;
		overflow: hidden;
		z-index: 0;
		border: none;
		padding: 0;
	}

	.left_box {
		left: 0px;
	}

	.right_box {
		right: 0px;
	}

	.left_item,
	.right_item {
		/* 
	   这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条)
	  */
		width: 74rpx;
		height: 148rpx;
		background-color: #ff8301;
		border: none;
		padding: 0;
	}

	.left_item {
		/*
	   1.设置圆角，圆角大小为高度的一半
	   2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点
	   */
		border-top-left-radius: 74rpx;
		border-bottom-left-radius: 74rpx;
		transform-origin: right center;
		animation-name: loading_left;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}

	.right_item {
		border-top-right-radius: 74rpx;
		border-bottom-right-radius: 74rpx;
		transform-origin: left center;
		animation-name: loading_right;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}

	.mask {
		/* 遮住div多余的部分，呈现出线条的效果 */
		position: absolute;
		top: 2rpx;
		left: 2rpx;
		right: 2rpx;
		bottom: 2rpx;
		z-index: 0;
		border-radius: 50%;
		background-color: rgb(252, 247, 227);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		white-space: nowrap;
		-webkit-animation: un_loading 1s infinite linear;
		color: #384763;
	}

	@keyframes loading_right {
		0% {
			transform: rotate(180deg);
		}

		50% {
			transform: rotate(360deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading_left {
		0% {
			transform: rotate(180deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading {
		border-width: 4px;
		background: #5376b7;
		width: 140rpx;
		height: 140rpx;
		border-style: solid;
		border-color: #ff5d42 transparent transparent transparent;
		border-radius: 50%;
		-webkit-animation: loading 1s infinite linear;
		/***一秒循环执行**/
	}

	@-webkit-keyframes loading {
		/**关键帧名称**/
		0% {
			-webkit-transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	@-webkit-keyframes un_loading {
		/**关键帧名称**/
		0% {
			-webkit-transform: rotate(360deg);
		}

		100% {
			-webkit-transform: rotate(0deg);
		}
	}
</style>
